<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户账号" prop="act">
                <el-input v-model="ruleForm.act">
                  <el-button slot="append" icon="el-icon-search" @click="searchUserByAct"></el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="用户姓名" prop="act">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="归还书籍" prop="book_id">
                <el-select v-model="ruleForm.book_id" placeholder="请选择书籍">
                    <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.number+'-'+item.name+'-'+item.author"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">归还</el-button>
              <el-button type="danger" @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import request from '@/utils/request';
export default {
    name:'BackBookList',
    data() {
      return {
        options: [],
        ruleForm: {
          user_id:'',
          act:'',
          name: '',
          book_id:''
        },
        rules: {
          act: [
            { required: true, message: '请输入用户账号', trigger: 'blur' },
          ],
          book_id: [
            { required: true, message: '请选择归还书籍', trigger: 'change' }
          ],
          name: [
            { required: true, message: '请搜索用户', trigger: 'blur' },
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 发送请求
            this.save()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$emit('onClose')
      },
      save(){
        request.post('/api/page/workbench/info/back.do',{
            user_id:this.ruleForm.user_id,
            book_id:this.ruleForm.book_id,
        }).then(res=>{
            if(res.code==="1"){
                this.$notify.success('归还成功')
                // 清空数据
                this.ruleForm.act=''
                this.ruleForm.name=''
                this.ruleForm.book_id=''
                this.$emit('load')
                this.$emit('onConfirm')
            }else{
                this.$notify.error(res.message)
            }
        })
      },
      searchUserByAct(){
        request.get('/api/page/settings/admin/user/searchbyact.do',{
          params:{
            act:this.ruleForm.act
          }
        }).then(res=>{
            this.ruleForm.user_id=res.id
            this.ruleForm.name=res.name
        })
        // 可归还书籍
        request.get('/api/page/workbench/infor/canback.do',{
          params:{
            act:this.ruleForm.act
          }
        }).then(res=>{
            this.options=res.books
        })
      }
    }
}
</script>

<style>

</style>